<template>
  <el-drawer
    size="50%"
    :visible.sync="shwoDrawer"
    :with-header="false">
    <p v-if="podMap.length == 1" class="pod-name">{{ podName }}</p>
    <el-select v-else v-model="podName" class="pod-name-select" placeholder="请选择" @change="selectPod">
      <el-option v-for="item in podMap" :key="item" :label="item" :value="item">
      </el-option>
    </el-select>
    <div class="chart-container">
      <div class="chart-container-item">
        <div class="chart-container-btn">
          <el-button type="text" @click="changeTime(24)">24小时</el-button>
          <el-button type="text" @click="changeTime(7*24)">7天</el-button>
          <el-button type="text" @click="changeTime(15*24)">15天</el-button>
          <el-button type="text" @click="changeTime(30*24)">30天</el-button>
        </div>
        <v-chart :option="gpuData" class="chart-item" />
      </div>
      <div class="chart-container-item">
        <v-chart :option="gpuMemData" class="chart-item" />
      </div>
      <div class="chart-container-item">
        <v-chart :option="cpuData" class="chart-item" />
      </div>
      <div class="chart-container-item">
        <v-chart :option="memData" class="chart-item" />
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getexperimentPodName } from '@/api/notebook'
import { getTaskVersionPodName } from '@/api/task'
import { getServingPodName } from '@/api/deploy'
import { usageDuration } from '@/api/dashboard'
import { getGameExperimentPodName } from '@/api/gameExperiment'
import {getGameTaskVersionPodName} from '@/api/gameTask'
import { formatTime } from "@/utils/tool";
export default {
  name: "drawerlog",
  data () {
    return {
      shwoDrawer: false,
      rowData: {},
      podName: '',
      podMap: [],
      gpuData: [],
      gpuMemData: [],
      cpuData: [],
      memData: [],
    };
  },
  props: ['row'],
  methods: {
    async getPod() {
      let res = null
      this.podName = ''
      this.podMap = []
      if (this.rowData.active == 0) {
        if (this.$isReinforce) { // $isReinforce为强化学习
          res = await getGameExperimentPodName({ id: this.rowData.id })
        } else {
          res = await getexperimentPodName({ id: this.rowData.id })
        }
      }
      if (this.rowData.active == 1) {
        if (this.$isReinforce) { // $isReinforce为强化学习
          res = await getGameTaskVersionPodName({ id: this.rowData.id })
        } else {
          res = await getTaskVersionPodName({ id: this.rowData.id })
        }
      }
      if (this.rowData.active == 2) {
        if (this.$isReinforce) { // $isReinforce为强化学习
          res = await getGameTaskVersionPodName({ id: this.rowData.id })
        }else{
          res = await getServingPodName({ id: this.rowData.id })
        }
      }
      console.log("res", res)
      this.podName = res.data[0]
      this.podMap = res.data
      this.assign(this.podName)
    },
    changeTime(time) {
      console.log(time)
      let startTime = formatTime(new Date().getTime() - 1000 * 60 * 60 * time)
      this.assign(this.podName, startTime)
    },
    async getduration(pod_name, resource_type, startTime) {
      let start = startTime || formatTime(new Date().getTime() - 1000 * 60 * 60 * 1)
      return await usageDuration({
        end: formatTime(new Date().getTime()),
        pod_name,
        resource_type,
        start,
        step: "300s",
      })
    },
    async assign(podName, startTime) {
      let gpu = await this.getduration(podName, 'gpu', startTime)
      let gpu_mem = await this.getduration(podName, 'gpu_mem', startTime)
      let cpu = await this.getduration(podName, 'cpu', startTime)
      let mem = await this.getduration(podName, 'mem', startTime)
      gpu.data.color = [
        'rgb(255, 70, 131)',
        'rgb(255, 158, 68)',
        'rgb(255, 70, 131)'
      ]
      gpu_mem.data.color = [
        'rgb(255, 70, 131)',
        'rgb(255, 158, 68)',
        'rgb(255, 70, 131)'
      ]
      cpu.data.color = [
        'rgb(255, 70, 131)',
        'rgb(255, 158, 68)',
        'rgb(255, 70, 131)'
      ]
      mem.data.color = [
        'rgb(255, 70, 131)',
        'rgb(255, 158, 68)',
        'rgb(255, 70, 131)'
      ]
      gpu.data.title = 'GPU-UTIL'
      gpu_mem.data.title = 'GPU-MEM'
      cpu.data.title = 'CPU'
      mem.data.title = 'MEM'
      this.gpuData = gpu.data
      this.gpuMemData = gpu_mem.data
      this.cpuData = cpu.data
      this.memData = mem.data
      console.log(this.gpuData,this.cpuData,this.memData)
    },
    selectPod() {
      this.assign(this.podName)
    }
  },
  watch: {
    row(val) {
      this.rowData = val
      this.getPod()
    }
  },
  mounted () {
    this.rowData = this.row
  },
};
</script>
<style lang="less" scoped>
.pod-name{
  line-height: 40px;
  padding: 10px 0 0 24px;
}
.pod-name-select{
  margin: 10px 0 0 24px;
  width: calc(100% - 50px);
}
.chart-container{
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  .chart-container-item{
    flex: 1;
    position: relative;
    .chart-container-btn{
      position: absolute;
      right: 120px;
      top: 0;
      z-index: 2;
    }
  }
  // .chart-item{
  //   flex: 1;
  // }
}
</style>
